<template>
  <div id="pie" style="width: 100%; height: 400px; border: 1px solid red"></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("pie");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "Referer of a Website",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
  // 响应式
  window.addEventListener(
    "resize",
    function () {
      myChart.resize();
    },
    true
  ); // true 冒泡  false 捕获
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", function () {
    myChart.dispose(); // 销毁echarts 防止内存泄漏
  });
});
</script>
